<template>
  <view class="tab-bar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="tab-item"
      :class="{ active: currentTab === item.pagePath }" 
      @click="switchTab(item.pagePath)"
    >
      <view class="tab-icon">
        <text class="iconfont" :class="item.icon"></text>
      </view>
      <text class="tab-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onMounted, onShow, onUnmounted } from 'vue';

// 当前页面路径
const currentTab = ref('/pages/index/index');

// 设置当前页面
const setCurrentPage = () => {
  const pages = getCurrentPages();
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1];
    const route = `/${currentPage.route}`;
    
    // 检查路径是否在tabList中，只设置已知的tabBar页面
    const matchedTab = tabList.find(tab => tab.pagePath === route || route.startsWith(tab.pagePath + '/'));
    if (matchedTab) {
      currentTab.value = matchedTab.pagePath;
      console.log('当前页面路径:', route, '匹配到tab:', matchedTab.pagePath);
    }
  }
};

// 监听页面显示
onMounted(() => {
  setCurrentPage();
  
  // 监听页面返回事件
  uni.onAppRoute((route) => {
    setTimeout(() => {
      setCurrentPage();
    }, 100);
  });
});

// 添加页面显示监听
uni.$on('tabPageShow', () => {
  setTimeout(setCurrentPage, 100); // 延迟执行，确保页面已完全切换
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  uni.$off('tabPageShow');
  // uni.offAppRoute(); // uni-app可能不支持offAppRoute
});

// 底部导航列表
const tabList = [
  { 
    text: '日程', 
    pagePath: '/pages/index/index', 
    icon: 'icon-calendar' 
  },
  { 
    text: '团队', 
    pagePath: '/pages/team/team', 
    icon: 'icon-team' 
  },
  { 
    text: '我的', 
    pagePath: '/pages/my/my', 
    icon: 'icon-user' 
  }
];

// 切换页面 - 使用switchTab
const switchTab = (path) => {
  if (currentTab.value !== path) {
    // 使用switchTab切换到tabBar页面
    uni.switchTab({
      url: path,
      success: () => {
        currentTab.value = path;
      },
      fail: (err) => {
        console.error('页面跳转失败:', err);
        // 如果switchTab失败，尝试使用reLaunch
        uni.reLaunch({
          url: path,
          success: () => {
            currentTab.value = path;
          }
        });
      }
    });
  }
};

// 导出方法供父组件使用
defineExpose({
  setCurrentPage
});
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom); // 兼容全面屏

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .tab-icon {
      font-size: 48rpx;
      color: #999;
      line-height: 1;

      // 使用字体图标的替代方案，因为无法直接加载字体文件
      // 这里用CSS模拟图标效果
      .icon-calendar:before {
        content: "📅";
      }

      .icon-team:before {
        content: "👥";
      }

      .icon-user:before {
        content: "👤";
      }
    }

    .tab-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 4rpx;
    }

    &.active {
      .tab-icon, .tab-text {
        color: #0066FF;
      }
    }
  }
}

// 为底部Tabbar预留空间
:deep(page) {
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
</style> 